<style lang="scss" scoped>
.box {
  width: 100%;
  height: 100%;
  background: #f1f1f1;
}
.TK {
  width: 400px;
  height: 200px;
  h2 {
    text-align: center;
    margin: 10px 0;
  }
  div {
    font-size: 16px;
    margin: 20px;
  }
}
.c1 {
  width: 90%;
  height: 250px;
  margin: 20px;
  border-radius: 10px;
  padding: 10px;
  background: #fff;
  h2 {
    width: 100%;
    height: 40px;
  }
}
.c2 {
  width: 90%;
  height: 200px;
  margin: 20px;
  border-radius: 10px;
  padding: 10px;
  background: #fff;
  h2 {
    width: 100%;
    height: 40px;
  }
}
.c3 {
  width: 90%;
  height: 200px;
  margin: 20px;
  border-radius: 10px;
  padding: 10px;
  background: #fff;
  h2 {
    width: 100%;
    height: 40px;
  }
}
footer {
  width: 100%;
  padding: 10px;
  position: fixed;
  bottom: 0;
}
</style>
<template>
  <div class="box">
    <header>
      <van-nav-bar
        left-arrow
        @click-left="$router.back()"
        title="网上预约挂号_在线资讯"
      />
    </header>
    <div class="c1" v-if="v">
      <h2>确认预约信息</h2>
      <van-cell title="就诊医院" :value="v[0].nosocomium" size="large" />
      <van-cell title="出诊医生" :value="v[0].doctorname" size="large" />
      <van-cell title="就诊医生" :value="v[0].doctoradministre" size="large" />
      <van-cell title="就诊日期" :value="v[0].doctorname" size="large" />
    </div>

    <div class="c2">
      <h2>添加联系人</h2>
      <van-cell-group inset>
        <van-field
          v-model="value"
          label="联系人"
          placeholder="我们怎么称呼您"
          input-align="right"
        />
      </van-cell-group>
      <van-cell-group inset>
        <van-field
          v-model="value1"
          label="联系方式"
          placeholder="请填写联系人手机"
          input-align="right"
        />
      </van-cell-group>
      <van-cell-group inset>
        <van-field
          v-model="sade"
          center
          clearable
          label="填写验证码"
          placeholder="填写验证码"
        >
          <template #button>
            <!-- <span v-if="time > 0">{{ time }}秒后重新发送</span> -->
            <van-button size="small" plain type="success" @click="onCode"
              >获取验证码</van-button
            >
          </template>
        </van-field>
      </van-cell-group>
    </div>

    <div class="c3">
      <h2>患者疾病/症状</h2>
      <van-cell-group inset>
        <van-field
          v-model="message"
          rows="2"
          autosize
          type="textarea"
          maxlength="15"
          placeholder="请输入疾病/症状"
          show-word-limit
        />
      </van-cell-group>
    </div>

    <van-popup
      v-model:show="showCenter"
      round
      class="TK"
      v-if="showCenter == true"
    >
      <h2>挂号须知</h2>
      <div>先预约挂号,后到院就诊</div>
      <div>
        <van-button
          type="success"
          size="large"
          round
          @click="showCenter = false"
          >确定</van-button
        >
      </div>
    </van-popup>

    <footer>
      <van-button type="success" size="large" @click="handGuahao(v)"
        >确认挂号</van-button
      >
    </footer>
  </div>
</template>
<script setup lang="ts">
import { onMounted, ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { showToast } from 'vant'
import axios from 'axios'
import type { ListState, doctorState } from '@/interface'
const value = ref('')
const value1 = ref('')
const message = ref('')
const showCenter = ref(true)
const sade = ref()
onMounted(() => {
  showCenter.value = true
})
const route = useRoute()
const router = useRouter()
const id = route.params.id
const v = ref()
const yy = ref()
const ListData = ref<ListState[]>([])
const getDetailData = async () => {
  const res = await axios.get('/api/doctor/detail', { params: { id: id } })
  v.value = res.data.data
  console.log(v.value)

  yy.value = res.data.data[0]
}
getDetailData()

const phoneNumber = ref('')
const time = ref(0)

const onCode = () => {
  // if (!/^1\d{10}$/.test(phoneNumber.value)) {
  //   showToast('手机号正确')
  //   return
  // }
  if (value1.value !== '') {
    getCode()
  } else {
    alert('手机号不能为空')
  }
}

const getCode = async () => {
  const res = await axios.post('/api/login', { phone: '' })
  const { code, data } = res.data
  console.log(data)
  sade.value = data
  if (code === 20000) {
    //  showToast('手机号格式正确')
    alert('获取验证码成功')
    startCountdown()
  } else {
    //  showToast('手机号格式不正确')
    alert('获取验证码失败')
  }
}

const startCountdown = () => {
  time.value = 60 // 设置倒计时时间
  const intervalId = setInterval(() => {
    if (time.value > 0) {
      time.value -= 1
    } else {
      clearInterval(intervalId)
    }
  }, 1000)
}

const handGuahao = (v: string) => {
  console.log(value.value)

  router.push(`/Guahao/${id}`)
}
watch(value, () => {
  localStorage.setItem('contacts', JSON.stringify(value.value))
})
</script>
